<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08-v-for遍历业主列表.html</title>
    <script src="js/vue.js"></script>

</head>
<body>

<!--
    v-for 标签 是 循环标签
      v-for="(数组中的元素,index) in 数组"
          {{表达式 展示元素的值 }}
-->
<div id="app">
    <table border="1" cellspacing="0">
        <tr>
            <td>编号</td>
            <td>姓名</td>
            <td>地址</td>
        </tr>
        <tr v-for="(user,index) in users">
            <td>{{user.id}}</td>
            <td>{{user.name}}</td>
            <td>{{user.address}}</td>
        </tr>

    </table>
</div>
<!--
      01、画页面  (数据可以写死)
      02、vue 中准备数据
      03  展示 数据到view中

-->
<script>
    new Vue({
        el: "#app",
        data: {
            users:[
                {
                    id:"01",
                    name:"马云",
                    address:"杭州"
                },
                {
                    id:"02",
                    name:"马化腾",
                    address:"深圳"
                },
                {
                    id:"03",
                    name:"雷军",
                    address:"北京"
                }
            ]
        }
    })
</script>

</body>
</html>